<template>
  <dv-border-box-8 style="height: 255px; padding: 5px">
    <dv-decoration-7 style="height: 30px; text-align: center"
      >菜系排行</dv-decoration-7
    >
    <div id="chart4"></div>
  </dv-border-box-8>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      orderBy: 0,
    };
  },
  mounted() {
    this.get_list();
  },
  watch: {
    "$store.state.orderBy"(newVal) {
      this.orderBy = newVal;
      this.get_list();
    },
  },
  methods: {
    get_list() {
      this.$http
        .get(`/bill/cuisineRank?orderBy=${this.orderBy}`)
        .then((res) => {
          const chartContainer = document.getElementById("chart4");
          echarts.dispose(document.getElementById("chart4"));
          const chart = echarts.init(chartContainer, null, {
            height: 255,
          });
          const names = res.data.map((item) => item.name).slice(0, 5);
          const customData = res.data
            .map((item) => item.totalCustom)
            .slice(0, 5);
          const quantityData = res.data
            .map((item) => item.totalQuantity)
            .slice(0, 5);
          const option = {
            textStyle: {
              color: "#fff", // 设置全局字体颜色为红色
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["销售额", "销售数量"],
              textStyle: {
                color: "#fff", // 设置全局字体颜色为红色
              },
            },
            xAxis: {
              type: "category",
              data: names,
            },
            yAxis: [
              {
                interval: 50,
                type: "value",
                name: "销售额",
                axisLabel: {
                  formatter: "{value} 元",
                },
              },
              {
                interval: 50,
                type: "value",
                name: "销售数量",
                axisLabel: {
                  formatter: "{value} 个",
                },
              },
            ],
            series: [
              {
                name: "销售额",
                type: "bar",
                data: customData,
              },
              {
                name: "销售数量",
                type: "bar",
                yAxisIndex: 1,
                data: quantityData,
              },
            ],
          };

          // 设置配置项并渲染图表
          chart.setOption(option);

          window.addEventListener("resize", function () {
            chart.resize();
          });
        });
    },
  },
};
</script>

<style>
</style>
